﻿@page
@using Microsoft.AspNetCore.Authorization
@using Microsoft.Extensions.Localization
@using Volo.Abp.AspNetCore.Mvc.UI.Layout
@using YaAppoint.Localization
@model YaAppoint.Web.Pages.Departments.IndexModel
@inject IStringLocalizer<YaAppointResource> L
@inject IAuthorizationService AuthorizationService
@inject IPageLayout PageLayout
@{
    PageLayout.Content.Title = "科室管理";
}
@section scripts
{
    <abp-script src="/Pages/Departments/Index.cshtml.js"/>
}
<div class="content-container">
    <div id="app">
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                        <el-input v-model.trim="filterName" placeholder="科室名" size="mini" style="width:300px;" clearable></el-input>
                        <el-button type="primary" v-on:click="loadTableData" icon="el-icon-search" style="margin-left:10px;" size="mini">搜索</el-button>
                    <el-button type="primary"  v-on:click="showCreate" icon="el-icon-plus" size="mini">新建</el-button>
                    </div>
                </el-col>
            </el-row>
        <hr class="line-gray" />
        <el-row>
            <div class="table-container">
                <el-table :data="tableData" size="mini" style="width:100%" current-row-key="id">
                    <el-table-column type="index" width="50" label="编号">

                    </el-table-column>
                    <el-table-column label="名称"  property="name">

                    </el-table-column>
                    <el-table-column label="编码"  property="outerCode">

                    </el-table-column>
                    <el-table-column label="活动"  property="type">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.isActive"
                                       disabled>
                            </el-switch>
                        </template>
                    </el-table-column>   
                    <el-table-column label="描述" width="250" property="desc">

                    </el-table-column>
                    <el-table-column label="操作" >
                        <template slot-scope="scope">   
                            <el-button size="mini" icon="el-icon-edit" v-on:click="showEdit(scope.$index, scope.row)"></el-button>
                            <el-button size="mini" icon="el-icon-delete" type="danger" v-on:click="deleteDep(scope.$index, scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-row>

        <!-- 添加-->
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px" v-on:close="resetForm" :close-on-click-modal="false">
            <el-form :model="department" :label-width="formLabelWidth" ref="dialogForm" :rules="rules">
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark" property="name">
                            <el-form-item label="名称" prop="name">
                                <el-input v-model.trim="department.name" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="编码" prop="outerCode">
                                <el-input v-model.trim="department.outerCode" v-on:change="onOuterCodeChange" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="顺序" prop="order">
                                <el-input v-model.trim="department.order" type="number"  size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="活动">
                                <el-switch v-model="department.isActive">
                                </el-switch>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="联系人" >
                                <el-input v-model.trim="department.contactPerson"  size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="联系电话">
                                <el-input v-model.trim="department.phoneNumber"  size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="描述">
                                <el-input type="textarea"
                                          :rows="2"
                                          placeholder="请输入描述"
                                          v-model="department.desc">
                                </el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" v-on:click="saveDep" size="mini">保存</el-button>
                <el-button v-on:click="resetForm" size="mini">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</div>
